<template>
    <a-spin :spinning="loading">
        <slot></slot>
        <div class="app-page-table-pagination" v-if="pagination">
            <a-pagination v-if="!simplePagination" show-quick-jumper :total="total" :page-size-options="pageSizeOptions"
                :page-size="_pageSize" @change="onChange" show-size-changer @showSizeChange="onShowSizeChange">
                <template #buildOptionText="props">
                    <span>{{ props.value }}条/页</span>
                </template>
            </a-pagination>

            <a-space v-if="simplePagination">
                <a-button @click="previousPage">
                    <LeftOutlined />
                </a-button>
                <a-button @click="nextPage">
                    <RightOutlined />
                </a-button>
            </a-space>
        </div>
    </a-spin>
</template>

<script setup lang="ts">
import { HttpClient } from '@/utils/HttpClient';
import { ref, defineProps, withDefaults, defineEmits, defineExpose } from 'vue'

/**
 * 参数
*/
interface IProps {
    /**
     * 请求地址
    */
    url: string;
    /**
     * 查询参数
    */
    queryParams: {};

    /**页码大小*/
    pageSize?: number;

    /**加载状态*/
    loading?: boolean;

    //是否自动加载
    autoLoading?: boolean;

    /**是否显示分页*/
    pagination?: boolean;

    //简单分页 只有上下翻页
    simplePagination?: boolean
}

const props = withDefaults(
    defineProps<IProps>(),
    {
        loading: true,
        pagination: true,
        autoLoading: true,
        simplePagination: false
        //pageSize: 5
    }
);

const emits = defineEmits(["onRequestBefore", "onGetData", "update:loading"]);
const pageSizeOptions = ref(['10', '20']);
const total = ref(0);
let _pageSize = props.pageSize ?? 10;

if (props.pageSize != undefined) {
    if (pageSizeOptions.value.indexOf(props.pageSize + '') < 0) {
        pageSizeOptions.value.unshift(props.pageSize + '');
    }
}
//分页选中进度
const onChange = (page: any, pageSize: any) => {
    onLoadData(page, pageSize, props.queryParams);
    _pageSize = pageSize;
};

//分页下拉列表变动
const onShowSizeChange = (current: number, size: number) => {
    onLoadData(current, size, props.queryParams);
    _pageSize = size;
}

//外部触发搜索方法
const onQuery = () => {
    onLoadData(1, _pageSize, props.queryParams);
}


//加载数据
const onLoadData = (page = 1, pageSize = 10, queryParameters = {}) => {
    let queryRequest = Object.assign({
        Page: {
            Index: page,
            Size: pageSize
        }
    }, queryParameters);
    //emits("onRequestBefore");
    emits("update:loading", true);
    HttpClient.post<any>(props.url ?? "", queryRequest).then((res) => {
        total.value = res.data.total;
        emits("onGetData", res.data.data);
        emits("update:loading", false)
    });
}

if (props.autoLoading) {
    onLoadData(1, props.pageSize ?? 10, props.queryParams);
}

/**简单分页上一页 */
const previousPage = () => {
    onLoadData(1, props.pageSize ?? 10, props.queryParams);
}

/**简单分页下一页 */
const nextPage = () => {
    onLoadData(99, props.pageSize ?? 10, props.queryParams);
}

defineExpose({
    onQuery
})

</script>